<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        DataView <span class="subitem">MultiViewState</span>
    </ui:define>

    <ui:define name="description">
        MultiViewState (MVS) feature enables DataView to maintain its state across pages by setting multiViewState attribute to true. In this demo, use pagination or change layout, then visit another page and then come back to this page. DataView state should remain as you've left it.
    </ui:define>

    <ui:param name="documentationLink" value="/components/dataview"/>
    <ui:param name="widgetLink" value="DataView-1"/>

    <ui:define name="implementation">
        <div class="product card">
            <h:form id="form">
                <p:messages id="messages"/>

                <p:commandButton value="Clear multiViewSate" action="#{dataGridView.clearMultiViewState}"
                                 update="@form" styleClass="mb-5" />

                <p:dataView var="product" value="#{dataGridView.products}" multiViewState="true" rows="12"
                            paginator="true"
                            rowsPerPageTemplate="6,12,16"
                            paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                            gridIcon="pi pi-th-large" listIcon="pi pi-bars">

                    <p:dataViewGridItem>
                        <div class="product-grid-item card border-1">
                            <div class="product-grid-item-top">
                                <div>
                                    <i class="pi pi-tag product-category-icon"/>
                                    <span class="product-category">#{product.category}</span>
                                </div>
                                <span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
                            </div>
                            <div class="product-grid-item-content">
                                <p:graphicImage name="images/product/#{product.image}" library="demo"/>
                                <div class="product-name">#{product.name}</div>
                                <div class="product-description">#{product.description}</div>
                                <p:rating readonly="true" value="#{product.rating}"/>
                            </div>
                            <div class="product-grid-item-bottom">
                                <h:outputText value="#{product.price}" styleClass="product-price">
                                    <f:convertNumber currencySymbol="$" type="currency"/>
                                </h:outputText>
                                <p:commandButton type="button"
                                                    value="Add To Cart"
                                                    icon="pi pi-shopping-cart"
                                                    disabled="#{product.inventoryStatus == 'OUTOFSTOCK'}">
                                </p:commandButton>
                            </div>
                        </div>
                    </p:dataViewGridItem>

                    <p:dataViewListItem>
                        <div class="product-list-item">
                            <p:graphicImage name="demo/images/product/#{product.image}"/>
                            <div class="product-list-detail">
                                <div class="product-name">#{product.name}</div>
                                <div class="product-description">#{product.description}</div>
                                <p:rating readonly="true" value="#{product.rating}"/>
                                <i class="pi pi-tag product-category-icon"/><span
                                    class="product-category">#{product.category}</span>
                            </div>
                            <div class="product-list-action">
                                <h:outputText value="#{product.price}" styleClass="product-price">
                                    <f:convertNumber currencySymbol="$" type="currency"/>
                                </h:outputText>
                                <p:commandButton type="button"
                                                    value="Add To Cart"
                                                    icon="pi pi-shopping-cart"
                                                    disabled="#{product.inventoryStatus == 'OUTOFSTOCK'}">
                                </p:commandButton>
                                <span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
                            </div>
                        </div>
                    </p:dataViewListItem>
                </p:dataView>
            </h:form>
        </div>
    </ui:define>

</ui:composition>
